<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>报销单</title>
    <script src="<%=basePath%>common/jquery/jquery-1.9.0.js"></script>
    <script src="<%=basePath%>common/layui/layui.all.js"></script>
    <script src="<%=basePath%>common/common.js"></script>
    <link rel="stylesheet" href="<%=basePath%>common/layui/css/layui.css">
</head>
<style>
    .layui-input {
        width: 400px;
    }

    #content {
        width: 700px;
        height: 400px;
        margin: 0 auto;
    }

</style>
<body>
<div id="content">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>报销单提交</legend>
    </fieldset>
    <form id="bill" method="post" class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">用餐日期:</label>
            <div class="layui-input-block">
                <input type="text" id="mealTime" name="mealTime" required lay-verify="required" placeholder=""
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用餐人员:</label>
            <div class="layui-input-block">
                <input type="text" name="mealPersons" required lay-verify="required|mealPersons" placeholder="请输入用餐人员"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用餐人数:</label>
            <div class="layui-input-block">
                <input type="number" name="personNum" required lay-verify="required|personNum" placeholder="请输入用餐人数"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发票总额:</label>
            <div class="layui-input-block">
                <input type="number" name="billAllPrice" required lay-verify="required|billAllPrice"
                       placeholder="请输入发票总额"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <!---->
        <div class="layui-form-item">
            <label class="layui-form-label">报销总额:</label>
            <div class="layui-input-block">
                <input type="number" name="reimbursementPrice" required lay-verify="required|reimbursementPrice"
                       placeholder="请输入报销总额" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">付款总额:</label>
            <div class="layui-input-block">
                <input type="number" name="payAllPrice" required lay-verify="required|payAllPrice"
                       placeholder="请输入付款总额" autocomplete="off" class="layui-input">
            </div>
        </div>
        <!---->

        <div class="layui-form-item">
            <label class="layui-form-label">付款人:</label>
            <div class="layui-input-block">
                <input type="text" name="payer" required lay-verify="required" placeholder="请输入付款人" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" id="commit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                <button type="button" class="layui-btn layui-btn-normal" onclick="seeBills()">查看发票列表</button>
            </div>
        </div>
    </form>
</div>

<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;
        laydate.render({
            elem: '#mealTime' //指定元素
        });
    });

    $(document).ready(function () {
        // 给input  date设置默认值
        var now = new Date();
        //格式化日，如果小于9，前面补0
        var day = ("0" + now.getDate()).slice(-2);
        //格式化月，如果小于9，前面补0
        var month = ("0" + (now.getMonth() + 1)).slice(-2);
        //拼装完整日期格式
        var today = now.getFullYear() + "-" + (month) + "-" + (day);
        //完成赋值
        $("input[name='mealTime']").val(today);

        $("input[name='mealPersons']").change(function () {
            var value = $(this).val();
            if (value) {
                if (value.indexOf(",") != -1) {
                    $(this).val(value.replace(/,/g, "，"));
                }
                /*if ($(this).val().indexOf("，") == 0 || $(this).val().lastIndexOf("，") == $(this).val().length - 1) {
                    $(this).val($(this).val().substring(0, $(this).val().length - 1));
                }*/
            }
            var num = $(this).val().split("，").length;
            if (num > 0) {
                var temp = $(this).val().split("，");
                var count=0;
                var index=0;
                for(i=0;i<temp.length;i++){
                    if(temp[i].trim()!=""){
                        index=i;
                        count++;
                    }
                }
                $("input[name='personNum']").val(count);

                $("input[name='payer']").val(temp[index]);
            }
        });

        //提交按钮事件
        $("#commit").click(function () {
            var mealPersons = $("input[name='mealPersons']").val();
            var personNum = $("input[name='personNum']").val();
            var billAllPrice = $("input[name='billAllPrice']").val();
            var payAllPrice = $("input[name='payAllPrice']").val();
            var reimbursementPrice = $("input[name='reimbursementPrice']").val();

            if($("input[name='mealTime']").val()==""){
                layer.open({
                    title: '提示',
                    content: '用餐日期不能为空！',
                });
                return;
            }
            if (!new RegExp(/^[\u4e00-\u9fa5]+[\u4e00-\u9fa5|，]*[\u4e00-\u9fa5]+$/).test(mealPersons)) {
                layer.open({
                    title: '提示',
                    content: '人员名称只能是中文,填写多人使用中文逗号隔开！',
                });
                return;
            }
            if (!new RegExp(/^(\d|[1-9]\d+)(\.\d+)?$/).test(personNum)) {
                layer.open({
                    title: '提示',
                    content: '人数必须为正整数',
                });
                return;
            }
            if ("0.0"==billAllPrice || "0.00"==billAllPrice ||
                !new RegExp(/^((0{1}\.\d{1,2})|([1-9]\d*\.{1}\d{1,2})|([1-9]+\d*))$/).test(billAllPrice)) {
                layer.open({
                    title: '提示',
                    content: '发票总额必须为大于0的小数'
                });
                return;
            }
            if(parseFloat(billAllPrice)>=1000){
                layer.open({
                    title: '提示',
                    content: '发票总额必须小于1000'
                });
                return;
            }
            if (mealPersons && mealPersons.split("，").length != personNum) {
                layer.open({
                    title: '提示',
                    content: '录入人员数目与人员名称数目不相符'
                });
                return;
            }

            $.ajax({
                url: webPath + "/bill/addBill",
                type: "post",
                //.serialize() 当提交多条表单数据时，我们可以采用当表单进行序列化的方式简化原有的操作
                data: $("#bill").serialize(),
                dataType: "json",
                success: function (ret) {
                    if (ret.result == "success") {
                        layer.open({
                            title: '提示',
                            content: '添加成功',
                            yes: function (index, layero) {
                                window.location.href = webPath + ret.url;
                                layer.close(index); //如果设定了yes回调，需进行手工关闭
                            }
                        });
                    } else {
                        layer.open({
                            title: '提示'
                            , content: '添加失败！请重试！'
                        });
                    }
                }
            });
        });
    });

    function seeBills() {
        window.location.href = webPath + "/jsp/index.jsp";
    }
</script>
</body>
</html>
